<template>
    <view class="container" :style="themeColor" :class="isShowFilter ? 'stop-scroll' : ''">
        <header-bar :config="config1"></header-bar>
        <search-bar :placeholderText="placeholderText" :gosearch="true" :productType="4" :actions="actions"
            @searchFn="searchFn" @actionFn="actionFn">
        </search-bar>
        <view class="take flex-start">
            <iconsfont customIcons="icon-dizhi" size="28"></iconsfont>
            <text class="takeinfo" @click="selectTake()" v-if="TakeDelivery.ID">自提点：{{ TakeDelivery.TakeDeliveryName }}
                | 切换</text>
            <text class="takeinfo" @click="selectTake()" v-else>自提点：请先添加自提点</text>
            <iconsfont customIcons="icon-xiayiji" size="28"></iconsfont>
        </view>
        <view class="topmain">
            <scroll-view :scroll-x="true" scroll-with-animation :scroll-into-view="intoIndex" :show-scrollbar="false">
                <view class="topClassify">
                    <view v-for="(item, index) in topClassify" @click="clickTab(item, index)" :key="index"
                        :id="'Classify' + index" :class="tabIndex == index && 'active'">
                        <image :src="easyGetImgUrl(item.img)" mode="aspectFill" alt=""></image>
                        <text>{{ item.name }}</text>
                    </view>
                </view>
            </scroll-view>
            <view class="unfold" @click="showClassify">
                <view>展</view>
                <view>开</view>
                <iconsfont customIcons="icon-xiangxia1" size="22"></iconsfont>
            </view>
        </view>
        <view class="main-dom product-main">
            <scroll-view class="product-main-nav" scroll-y="true" :style="{ height: listHeight }">
                <nav-tree :tree-data="classifyList" :active-id="activeId" @treeClickEvent="treeClickEvent"> </nav-tree>
            </scroll-view>
            <view class="product-main-list">
                <view :style="{ height: listHeight }" v-if="loadOk">
                    <product-list ref="productList_main" :requestData="requestData" :height="listHeight"
                        :isHideProImg="isHideProImg" @sku="sku" @amountProp="amountProp" :infoType="4"
                        :displayData="displayData" :tempType="tempType" :isOnShow="isOnShow" @upFavorite="upFavorite"
                        @isUpNum="isUpNum" :isClass="isClass" @loadNoMoreBack="loadNoMoreBack">
                    </product-list>
                </view>
            </view>
        </view>
        <uni-popup ref="popAmountTip" type="center" class="popAmountTip" :animation="false" :maskClick="true">
            <view class="pop-return-box">
                <view class="pop-return-title">
                    <text>输入订购数量</text>
                </view>
                <!-- #ifdef APP -->
                <input confirm-type="search" :auto-focus="true" maxlength="10" type="digit" v-model="popinputAmount"
                    class="btn-input" />
                <!-- #endif -->
                <!-- #ifndef APP -->
                <input confirm-type="search" :focus="isFocus" maxlength="10" :selection-start="selectionStart"
                    :selection-end="selectionEnd" type="digit" v-model="popinputAmount" class="btn-input" />
                <!-- #endif -->

                <view class="pop-action">
                    <view @click="popAmountClose">取消</view>
                    <view @click="popAmountConfirm">确定</view>
                </view>
            </view>
        </uni-popup>
        <uni-popup type="bottom" ref="popSku" @change="skuChange" class="flxedtop">
            <product-spec v-if="showPopSku" :data="optPopup.data" :tempType="tempType" :fresh="optPopup.change"
                :popup-type="optPopup.type" :orderType="23" @closePopup="closePopup" @addCart="addCart"
                @addBatch="addBatch" @setCarListFunc="setCarListFunc">
            </product-spec>
        </uni-popup>
        <uni-popup type="top" ref="showClassify">
            <view class="flxedClassify">
                <view class="title">全部分类</view>
                <view class="topClassify topClassifyPop">
                    <view v-for="(item, index) in topClassify" @click="clickTab(item, index)" :key="index"
                        :id="'Classify' + index" :class="tabIndex == index && 'active'">
                        <image :src="easyGetImgUrl(item.img)" mode="aspectFill" alt=""></image>
                        <text>{{ item.name }}</text>
                    </view>
                </view>
                <view class="flxedbottom" @click="$refs.showClassify.close()">
                    <view style="margin-right: 10rpx">点击收起</view>
                    <iconsfont customIcons="icon-xiangshang1" color="#333333" size="28"></iconsfont>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import { mapGetters } from "vuex"
import searchBar from "@/components/common/search-bar.vue"
import productList from "@/components/group/product-list.vue"
import navTree from "@/components/product/nav-tree.vue"
import productSpec from "@/components/product/product-spec.vue"
import { getPlatform } from "@/uni-sub-base/utils/platformUtil.js"
import { getElementHeight, getElementTop } from "@/uni-sub-base/utils/elementUtil.js"
import { getProductDisplay } from "@/utils/appInit.js"

import { getProductTypeTree, productBrandList, getTagList } from "@/service/api/product.js"
import { GetUserDefaultTakeDelivery } from "@/service/api/takeDelivery.js"

import config from "@/config/config.js"
import numPopup from "@/components/order/num-popup.vue"
import utilsOld from "@/utils/utilsOld.js"
import { updateCart } from "@/utils/cartUtil.js"
export default {
    components: {
        searchBar,
        productList,
        navTree,
        productSpec,
    },
    props: {
        //列表位置 0商品 1无单退货
        tempType: {
            type: Number,
            default: 0,
        },
        isOnShow: {
            type: Boolean,
            default: true,
        },
        isClass: {
            type: Boolean,
            default: false,
        },
        isLimit: {
            type: Boolean,
            default: false,
        },
        currentClass: {
            type: String,
            default: "0",
        },
    },
    watch: {
        isOnShow(e) { },
    },
    data() {
        return {
            config1: {
                title: "团购",
                back: false,
                centerSlot: true,
                barPlaceholder: true,
            },
            tabIndex: 0,
            intoIndex: "",
            topClassify: [],
            popinputAmount: "",
            inputAmount: "",
            numPopShow: false,
            initClassify: false,
            activeId: -1,
            classifyList: [],
            secondClassifyList: [],
            isFold: true,
            skuModel: false,
            isHideProImg: false,
            actions: [],
            placeholderText: "请输入商品名称",
            searchValue: "",
            navHeight: 0, //nav所需高度
            listHeight: 0, //list所需高度
            listHeight1: 0, //list所需高度
            listHeight2: 0, //list所需高度
            listHeightNoneSub: 0, //list所需高度
            initHeight: 0,
            productDatas: [],
            navItems: [],
            currentNav: 0,
            isloadding: false,
            loadOk: false,
            // sku 商品规格弹窗
            optPopup: {
                data: {},
                type: "",
                change: false,
                show: true,
            },
            isClosePop: false,
            treeOk: false,
            tags: [],
            brands: [],
            // 请求参数
            requestData: {
                ProductType: 4,
                OrderBy: "display_sequence",
                Sort: "desc",
                infoType: false,
            },
            displayData: {},
            showPopSku: true,
            timer: null,
            isUp: true,
            isShowFilter: false,
            popTop: "",
            popite: {},
            popitem: {},
            poptype: null,
            popdisplayData: {},
            poprefresh: false,
            isShowFilter: false,
            popTop: "",
            totalClassify: {},
            isFocus: false,
            selectionStart: -1,
            selectionEnd: 0,
            isIos: false,
            TakeDelivery: {},
        }
    },
    watch: {
        //监听购物车数据
        getUpView(e) {
            //获取总数
            this.refresh()
        },
    },
    computed: {
        ...mapGetters(["getUpView"]),
    },
    onShow() {
        //多选规格批量操作回来返回UI处理
        //#ifdef MP
        let pages = getCurrentPages()
        let currPage = pages[pages.length - 1] //当前页
        // 直接用this.currPage.data去取B页面传递过来的数据
        this.isClosePop = currPage.data.isClosePop
        //#endif

        if (this.isClosePop) {
            this.$refs.popSku.close()
            this.isClosePop = false
        }
    },
    mounted() {
        if (getPlatform() == "ios") {
            this.isIos = true
        } else {
            this.isIos = false
        }
        this.getListHeight()
        this.getProductTypeTree()
        this.GetProductDisplay()
        this.GetUserDefaultTakeDelivery() //默认自提点
    },
    methods: {
        selectTake() {
            if (this.TakeDelivery.ID) {
                uni.navigateTo({
                    url: "/pages_group/packet/group/takeTheirlist?from=selectBack&pagefrom=product",
                    events: {
                        getSelectData: (data) => {
                            this.TakeDelivery = data.data
                        },
                    },
                })
            } else {
                // #ifdef APP-PLUS
                uni.navigateTo({
                    url: "/pages_group/packet/map/map-poi?from=productBack",
                    events: {
                        getSelectData: (data) => {
                            this.TakeDelivery = data.data
                        },
                    },
                })
                // #endif
                // #ifdef  MP-WEIXIN
                uni.navigateTo({
                    url: "/pages_group/packet/map/map-poi-wx?from=productBack",
                    events: {
                        getSelectData: (data) => {
                            this.TakeDelivery = data.data
                        },
                    },
                })
                // #endif
            }
        },
        GetUserDefaultTakeDelivery() {
            GetUserDefaultTakeDelivery({}).then((res) => {
                if (res.State == 1) {
                    this.TakeDelivery = res.Data
                } else {
                    if (res.Msg != "未设置可用的提货点") {
                        this.easyToast(res.Msg)
                    }
                }
            })
        },
        clickTab(item, index) {
            this.$refs.showClassify.close()
            this.tabIndex = index
            this.intoIndex = "Classify" + index
            this.classifyListFn(item)
        },
        classifyListFn(item) {
            this.classifyList = []
            this.totalClassify = {
                OrderBy: item.OrderBy,
                id: item.id,
                name: "全部",
                parent_id: item.parent_id,
                parent_path: item.parent_path,
                type_id: item.type_id,
            }
            this.classifyList.push(this.totalClassify)
            if (item.children && item.children.length > 0) {
                item.children.forEach((item) => {
                    this.classifyList.push(item)
                })
            }
            this.activeId = item.id
            this.requestData.typePath = item.parent_path
            this.loadOk = true
            this.refresh()
        },
        showClassify() {
            this.$refs.showClassify.open()
        },
        popAmountClose() {
            this.$refs.popAmountTip.close()
            this.blurFn()
        },
        popAmountConfirm() {
            this.inputAmount = this.popinputAmount
            this.popite.Amount = this.popinputAmount
            this.changeAmountFn(this.popite, this.popitem, this.poptype, this.popdisplayData)
        },
        changeAmountFn(item, ite, type, popdisplayData) {
            var that = this
            let num = Number(item.Amount)
            let stock = item.Stock
            let minNum = ite.MinNum
            let UnitRatio = item.Ratio
            let LimitBuy = ite.LimitBuy
            let addNum = ite.AddNum
            const _oldAmount = item.Amount

            if (popdisplayData.NoCheckStock) {
                if (type != 0) {
                    item.Amount = num + Number(type)
                } else {
                    item.Amount = num
                }
                if (item.Amount < 0) {
                    item.Amount = 0
                }
            } else {
                utilsOld.changeAmountNew(item, num, stock, type, minNum, UnitRatio, LimitBuy, addNum)
            }
            this.poprefresh = true
            this.$nextTick(() => {
                this.poprefresh = false
            })
            this.$forceUpdate()
            this.isUpNum(false)
            //商品
            if (_oldAmount !== item.Amount || type === 0) {
                const _obj = {}
                _obj.ProductId = item.ProductId
                _obj.Amount = item.Amount
                _obj.SkuId = item.SkuId
                _obj.UnitId = item.UnitId
                _obj.UnitName = item.UnitName
                _obj.Ratio = item.Ratio
                let param = []
                param.push(_obj)
                updateCart(param, false, true, 23).then((res) => { })
            }
            setTimeout((e) => {
                that.$refs.popAmountTip.close()
                this.blurFn()
            }, 500)
        },
        blurFn() {
            this.$nextTick(() => {
                this.isFocus = false
                this.selectionStart = -1
                this.selectionEnd = -1
            })
        },
        foldToggle() {
            const that = this
            that.isFold = !this.isFold
            that.$nextTick(function () {
                that.getClassifyHeight()
            })
        },
        choseClassify(item) {
            if (this.activeId !== item.id) {
                this.resetClass(item, false)
            }
        },
        // 获取整体显示设置
        GetProductDisplay() {
            getProductDisplay().then((res) => {
                if (res) {
                    this.displayData = res.Data
                    // if(this.displayData.IsShowImg){
                    // 	this.actions = [{
                    // 		type: "icon-youtu",
                    // 		id: 3,
                    // 		iconType: 3
                    // 	}]
                    // }else{
                    // 	this.actions = [{
                    // 		type: "icon-wutu",
                    // 		id: 3,
                    // 		iconType: 3
                    // 	}]
                    // }
                }
            })
        },
        //商品分类树列表
        getProductTypeTree() {
            let param = {
                InfoType: 4,
                parent_path: "_0_2_",
            }
            getProductTypeTree(param).then((res) => {
                this.getNavData(res)
            })
        },
        getNavData(res) {
            if (res) {
                this.initClassify = false
                this.topClassify = res.Data.children
                this.classifyListFn(this.topClassify[0])
            }
        },
        //刷新列表
        refresh() {
            this.$refs.productList_main.refresh(this.requestData)
        },
        //收藏触发更新
        upFavorite(infoType) {
            this.$refs.productList_main.refresh(this.requestData)
        },
        getListHeight(isHome = false) {
            //获取商品高度
            getElementHeight(this, ".main-dom", (e) => {
                e = e - 54
                this.initHeight = e
                this.listHeight = e + "px"
                if (this.isIos) {
                    this.listHeight = e - 20 + "px"
                } else {
                    this.listHeight1 = e - 32 + "px"
                    this.listHeight2 = e - 32 + "px"
                }
                this.listHeightNoneSub = e + "px"
            })
        },
        getClassifyHeight() {
            if (this.secondClassifyList && this.secondClassifyList.length > 0) {
                const query = uni.createSelectorQuery().in(this)
                query
                    .select(".secondClassify")
                    .boundingClientRect((data) => {
                        let dataHeight = 0
                        if (data) {
                            dataHeight = Number(data.height)
                        }
                        this.listHeight1 = Number(this.initHeight) - dataHeight - 62 + "px"
                    })
                    .exec()
            } else {
                this.listHeight1 = this.listHeightNoneSub
            }
        },

        searchFn(searchText) {
            //搜索
            this.requestData.search = searchText

            if (this.isClass) {
                this.resetClass(this.classifyList[0])
            } else {
                this.$refs.productFilter.reSet()
                this.resetClass(this.classifyList[0])
            }
            if (this.getMenuStyle() == 0 || this.getMenuStyle() == 2) {
                this.$refs.productFilter.hideAllPop()
            }
        },
        resetClass(item, bool = true) {
            const that = this
            if (bool) {
                that.secondClassifyList = item.children || []
                that.isFold = true
            } else {
                if (item.children && item.children.length > 0) {
                    that.secondClassifyList = item.children
                    that.isFold = true
                }
            }
            that.activeId = item.id
            that.typePath = item.parent_path
            that.requestData.typePath = item.parent_path

            if (!that.isUp) {
                that.$emit("upCart", true)
                that.isUp = true
            }
            that.$nextTick(function () {
                that.getClassifyHeight()
            })
            that.refresh()
        },
        goCart() {
            uni.navigateTo({
                url: "/pages/cart/cartTemp",
            })
        },
        actionFn(actionItem) {
            //功能点击
            if (actionItem.id == 1) {
                //扫一扫
                this.scan()
            } else if (actionItem.id == 2) {
                //进入购物车
                this.goCart()
            } else if (actionItem.id == 3) {
                //有图无图切换
                this.changeListTheme()
            }
            if (this.getMenuStyle() == 0 || this.getMenuStyle() == 2) {
                this.$refs.productFilter.hideAllPop()
            } else if (this.getMenuStyle() == 1) {
                this.isShowFilter = false
            }
        },
        scan() {
            //扫一扫
            //#ifdef MP||APP-PLUS
            // 允许从相机和相册扫码
            uni.scanCode({
                success: function (res) {
                    uni.showToast({
                        title: "扫码结果:" + res.result,
                        icon: "none",
                        duration: 2000,
                    })
                },
            })
            //#endif
        },
        changeListTheme(isShow) {
            //切换商品列表无图显示
            let change = this.displayData.IsShowImg == 1 ? 0 : 1
            this.displayData.IsShowImg = change
            if (this.displayData.IsShowImg) {
                this.actions = [
                    {
                        type: "icon-youtu",
                        id: 3,
                        iconType: 3,
                    },
                ]
            } else {
                this.actions = [
                    {
                        type: "icon-wutu",
                        id: 3,
                        iconType: 3,
                    },
                ]
            }
            this.$forceUpdate()
        },
        sku(item) {
            this.showPopSku = true
            this.optPopup.type = "attr"
            this.optPopup.data = item
            this.$refs.popSku.open()
        },
        amountProp(ite, item, type, displayData) {
            this.popite = ite
            this.popitem = item
            this.poptype = type
            this.popdisplayData = displayData
            if (ite.Amount == 0) {
                this.popinputAmount = 0
            } else {
                this.popinputAmount = ite.Amount
            }
            this.$refs.popAmountTip.open()
            setTimeout((e) => {
                this.isFocus = true
                this.selectionStart = 0
                this.selectionEnd = this.popinputAmount.toString().length
            }, 100)
        },
        addCart(e) {
            this.$refs.popSku.close()
        },
        addCartBatch(e) { },
        addBatch(e) {
            this.$refs.popSku.close()
            this.$refs.popBatch.open()
        },
        buyNow() { },
        // 点击分类事件
        treeClickEvent(item) {
            if (this.activeId !== item.id) {
                this.resetClass(item)
            }
        },
        closePopup() {
            this.$refs.popSku.close()
        },
        setCarListFunc() {
            this.$forceUpdate()
        },
        closePopupBatch() {
            this.$refs.popBatch.close()
        },
        setCarListFuncBatch() {
            this.$forceUpdate()
        },
        filterFn(data) {
            this.requestData.OrderBy = data.OrderBy
            this.requestData.Sort = data.Sort
            this.refresh()
        },
        skuChange(e) {
            if (!e.show) {
                this.showPopSku = false
                // this.$nextTick(e=>{
                // 	this.showPopSku = true
                // })
            }
        },
        isUpNum(e) {
            this.isUp = e
        },
        getMenuStyle() {
            if (this.isClass) {
                return 1
            }
            if (this.displayData && typeof this.displayData.CategoryStyle == "number") {
                return this.displayData.CategoryStyle
            }
            return config.appSet.proMenuStyle
        },

        loadNoMoreBack(e) {
            if (e) {
                let objItem = {}
                let hasIn = false
                this.classifyList.forEach((e) => {
                    e.expand = false
                })
                if (!this.classifyList || this.classifyList.length < 1) {
                    return
                }
                if (this.activeId == this.classifyList[0].id) {
                    //当前是全部分类
                    this.treeClickEvent(this.classifyList[1])
                } else {
                    for (var i = 0; i < this.classifyList.length; i++) {
                        let item = this.classifyList[i]
                        if (item.id == this.activeId) {
                            //判断当前是否是大类
                            this.hasIn = true
                            if (i != this.classifyList.length - 1) {
                                objItem = this.classifyList[i + 1]
                            } else {
                                objItem = this.classifyList[0]
                            }
                            this.treeClickEvent(objItem)
                            return
                        }
                    }
                    if (!hasIn) {
                        for (var i = 1; i < this.classifyList.length; i++) {
                            let item = this.classifyList[i]
                            let path = item.parent_path
                            if (this.typePath.includes(path)) {
                                let item = this.classifyList[i]
                                if (i != this.classifyList.length - 1) {
                                    objItem = this.classifyList[i + 1]
                                } else {
                                    objItem = this.classifyList[0]
                                }
                                this.treeClickEvent(objItem)
                                return
                            }
                        }
                    }
                }
            }
        },
    },
}
</script>

<style lang="scss">
.stop-scroll {
    position: fixed;
    height: 100%;
    overflow: hidden;
    width: 100%;
}

.product-main {
    display: flex;
    flex-direction: row;

    .product-main-nav {
        display: flex;
        flex: 1.3;
        flex-direction: column;
        // background: $uni-bg-color-grey;
        position: relative;
        z-index: 10;
        overflow-y: scroll;
    }

    .product-main-list {
        // display: flex;
        flex: 3.5;
        // justify-content: center;
        background: $uni-bg-color-grey;
        position: relative;
        z-index: 1;
        margin-left: -8rpx;
    }

    .p-b-120 {
        padding-bottom: 120rpx;
    }
}

.swiper {
    background: $color-white;
}

.product-main-1 {
    .product-main-list {
        padding: 0 $app-page-padding;
        background: $uni-bg-color-grey;
    }

    .p-b-120 {
        padding-bottom: 120rpx;
    }
}

.nav-bar {
    display: flex;
    height: 88rpx;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    background: $color-white;
    border-bottom: solid 1rpx $line;

    .nav-bar-scroll {
        display: flex;
        flex-direction: row;
        width: calc(100% - 110rpx);
    }

    .nav-bar-action {
        display: flex;
        flex-direction: row;
        align-items: center;

        .line {
            width: 1rpx;
            height: 26rpx;
            background: #ccc;
        }

        .filter-box {
            min-width: 60rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 0 28rpx;

            .filter-box-icon {
                display: flex;
            }

            .filter-box-text {
                font-size: $font-size-20;
            }
        }
    }
}

.secondClassify {
    width: 100%;
    box-sizing: border-box;
    background: $color-white;
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    padding: 32rpx 50rpx 0 20rpx;
    position: relative;

    .secondClassify-item {
        flex-shrink: 0;
        flex-grow: 0;
        padding: 6rpx 16rpx;
        font-size: $font-size-26;
        line-height: 1.5;
        background-color: $color-gray-5;
        border-radius: 42rpx;
        margin: 0 24rpx 24rpx 0;
    }

    .active-item {
        color: $color-white;
        background: $color-main;
    }

    .fold-icon {
        position: absolute;
        width: 50rpx;
        height: 50rpx;
        top: 32rpx;
        right: 0;
        background: $color-white;
        padding-left: 16rpx;

        // background: #eee;
        &:after {
            content: "";
            position: absolute;
            top: 10rpx;
            left: 14rpx;
            width: 15rpx;
            height: 15rpx;
            transform: rotate(45deg);
            border: 2rpx solid;
            border-color: transparent $color-gray-3 $color-gray-3 transparent;
        }
    }

    .unfold-icon {
        &:after {
            transform: rotate(-135deg);
            top: 20rpx;
        }
    }
}

.secondClassify-unfold {
    flex-wrap: wrap;
}

.botline {
    height: 1rpx;
    background: #ebebeb;
}

.color3 {
    color: $color-gray-3;
    font-size: 24rpx;
}

.take {
    background: #fff;
    padding: 16rpx 24rpx;

    .takeinfo {
        font-size: 28rpx;
        padding: 0 0rpx 0 8rpx;
    }
}

.topmain {
    position: relative;
    box-shadow: 0rpx 5rpx 20rpx 0rpx rgba(0, 0, 0, 0.07);
    z-index: 10;

    .unfold {
        width: 82rpx;
        height: 154rpx;
        background: #fffcfc;
        position: absolute;
        top: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 24rpx;
        color: #333;
        font-weight: bold;
    }
}

.topClassify {
    display: flex;
    justify-content: flex-start;
    height: 154rpx;
    background: #fffcfc;
    padding: 0 0rpx 0 16rpx;

    view {
        color: #666666;
        font-size: 24rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        margin: 0 24rpx;

        image {
            width: 96rpx;
            height: 96rpx;
            border-radius: 30rpx;
            border: 2rpx solid #fffcfc;
            margin-bottom: 6rpx;
        }
    }

    .active {
        image {
            border-color: $app-color-main;
        }

        text {
            color: $app-color-main;
            font-weight: bold;
        }
    }

    &>view:last-child {
        padding-right: 106rpx !important;
    }
}

.topClassifyPop {
    height: auto;
    flex-wrap: wrap;

    view {
        margin-bottom: 24rpx;
    }

    &>view:last-child {
        padding-right: 0rpx !important;
    }
}

.flxedClassify {
    background: #fff;
    border-radius: 0 0 30rpx 30rpx;

    .title {
        padding: 100rpx 40rpx 30rpx 40rpx;
        font-weight: bold;
    }

    .flxedbottom {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 24rpx;
    }
}

.flxedtop {
    z-index: 2000;
}
</style>
